<template>
  <div>
    <div>
      <el-select v-model="searchMode" placeholder="请选择订单类型" style="width: 150px;margin-right: 10px">
        <el-option value="已支付" label="已支付"></el-option>
        <el-option value="已发货" label="已发货"></el-option>
        <el-option value="已收货" label="已收货"></el-option>
      </el-select>
      <el-input v-model="searchText" @keyup.enter.native="load" style="width: 200px"> <i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-button @click="reset" type="warning" style="margin: 10px">重置</el-button>
      <el-button @click="load" type="primary" style="margin: 10px">搜索</el-button>
    </div>
    <div class="list">
    <el-table :data="tableData" border="" style="width: 100%">
      <el-table-column fixed prop="orderId" label="订单号" width="150">
      </el-table-column>
      <el-table-column prop="address.phone" label="收货电话" width="120">
      </el-table-column>
      <el-table-column prop="orderPrice" label="支付金额" width="120">
      </el-table-column>
      <el-table-column prop="goodsNum" label="商品ID" width="120">
      </el-table-column>
      <el-table-column fixed prop="storeId" label="商场编号" width="150">
      </el-table-column>
      <el-table-column prop="address.city" label="地址" width="250">
      </el-table-column>
      <el-table-column prop="payTime" label="支付时间" width="100">
      </el-table-column>
      <el-table-column prop="address.detail" label="承运快递" width="100">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="100">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>
  </div>
<!--    分页-->
    <div style="margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[3, 5, 8, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
<!--    详情弹窗-->
    <el-dialog :visible.sync="dialogFormVisible">
      <el-table :data="detail" background-color="black" >
        <el-table-column  label="图片" width="150" >
          <template   slot-scope="scope">
            <img :src="scope.row.img"  min-width="100" height="100" />
          </template>
        </el-table-column>

        <el-table-column prop="goodId" label="商品id"  ></el-table-column>
        <el-table-column prop="goodName" label="商品名称"  ></el-table-column>
        <el-table-column prop="standard" label="商品规格"  ></el-table-column>
        <el-table-column prop="price" label="单价"  ></el-table-column>
        <el-table-column prop="discount" label="折扣"></el-table-column>
        <el-table-column label="实价" >
          <template slot-scope="scope">
            {{scope.row.price * scope.row.discount}}
          </template>
        </el-table-column>
        <el-table-column prop="count" label="数量" ></el-table-column>
        <el-table-column label="总价" >
          <template slot-scope="scope">
            {{scope.row.price * scope.row.discount * scope.row.count }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'; // 引入axios库    

export default {
  name: "OrderList",
  components: {

  },
  data() {
    return {
      tableData: []
    }
  },
  async created() {
    const user = JSON.parse(localStorage.getItem('user')); // 从localStorage中获取user对象  
    const userId = user && user.userId; // 获取userId值  

    if (userId) {
      try {
        const response = await axios.get(`http://localhost:8089/consumer/selectMyOrders?userId=${userId}`); // 使用axios库发送GET请求，将userId作为参数传递    
        if (response.status === 200) { // 检查响应状态码    
          this.tableData = response.data.data;
          console.log(this.orders);
        } else {
          console.error('Error fetching orders:', response);
        }
      } catch (error) {
        console.error('Error during API call:', error);
      }
    } else {
      console.error('User ID not found in localStorage.');
    }
  }
}    
</script>

<style scoped>
</style>
